<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cjrow ></cjrow>
			<cjrow ></cjrow>
		</div>
		<div>
			<cjrow ></cjrow>
		</div>
		
		<!-- 注册一个自定义组件 -->
		<script type="text/javascript">
			// 全局注册一个组件,在vue实例中使用.该组件
			Vue.component('cjrow',{
				// 一个组件的 data 选项必须是一个函数
				// 这个data中的数据只能在组件内部使用,相当于私有变量.
				data : function(){
					return{
						count:1,
						anthor:'ccqx'
					}
				},
				template:'<button type="button" v-on:click="count++">{{count}}</button>'
			})
			
			// 在vue实例中,可以使用全局注册过的组件
			var vm = new Vue({
				// 必须要指定这个id才能在这个div中使用
				el : "#app",
				data : {
					
				},
			});
			
		
			
		</script>
	</body>
</html>
